<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				width: 130px;
				height: 45px;
				background-image: url(img/btn/amazon-sprite_.png);
			}
			
			.box2{
				width: 42px;
				height: 30px;
				background-image: url(img/btn/amazon-sprite_.png);
				/*
				这里的 -58px 表示amazon-sprite_.png这张图往左移动 58px
				-338px 表示再往上移动 338px
				这样再结合宽和高，就可以在左上角读取所需的部分图像。
				*/
				background-position: -58px -338px;
			}
		</style>
	</head>
	<body>
		<!-- H:\尚硅谷前端学科全套教程\1.前端学科--基础阶段\尚硅谷HTML+CSS教程\视频\视频4 《79.尚硅谷_HTML&CSS基础_雪碧图的制作和使用》 -->
	   <div class="box1"></div>
	   <div class="box2"></div>
	</body>
</html>
